<template>
  <div class="goods">
    		<div class="search-box">
                <search class="search-dom"></search>
            </div>
    <div class="nav-subs">
      <div class="nav-sub-bgs"></div>
      <div class="nav-sub-wrappers">
        <div class="w">
          <ul class="nav-lists">
            <li>
              <router-link to="/">
                <a>首页</a>
              </router-link>
            </li>
            <li>
              <router-link to="/game">
                <a class="active">游戏专区</a>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!---------------  查询条件 ---------------------->
    <div class="m-condition-box">
      <div class="w-row">
        <div class="w-col-title">游戏类型：</div>
        <div class="w-col-value">
          <span :class="curCheckedGameId == item.id ? 'current':''" v-for="(item,i) in gameList" @click="checkedGame(item)">{{item.name}}</span>
        </div>
      </div>
      <div class="w-row">
        <div class="w-col-title">游戏区服：</div>
        <div class="w-col-value">
          <span :class="curCheckedGroupId == obj.id ?'current':''" v-for="(obj,j) in groupList" @click="checkedGroup(obj)">{{obj.name}}</span>
        </div>
      </div>
      <div class="w-row">
        <div class="w-col-title">价格区间：</div>
        <div class="w-col-value">
          <span :class="priceIndex == -1 ? 'current':''" @click="checkedPrice('',-1)">全部</span>
          <span :class="priceIndex == k ? 'current':''" v-for="(arr ,k) in priceRange" :key="k" @click="checkedPrice(arr,k)">{{arr.priceSectionStart}}{{arr.priceSectionEnd == '+' ? '元以上':'-' +arr.priceSectionEnd+'元'}}</span>
        </div>
      </div>
    </div>
    <!------------------  排序条件  --------------------->
    <div class="m-sort-box">
      <el-row class="w-row">
        <el-col :span="3">
          <div class="col-sort current">
            综合排序
          </div>
        </el-col>
        <el-col :span="3">
          <div class="col-sort" @click="sortByPrice">
            价格<span>{{priceSortFlag}}</span>
          </div>
        </el-col>
        <!--<el-col :span="3">
                    <div class="col-sort" @click="sortByTime">
                        时间<span>{{timeSortFlag}}</span>
                    </div>
                </el-col>-->
        <el-col :span="3">
          <div class="col-sort"></div>
        </el-col>
        <el-col :span="3">
          <div class="col-sort"></div>
        </el-col>
        <el-col :span="3">
          <div class="col-sort"></div>
        </el-col>
        <el-col :span="6">
          <div class="col-sort"></div>
        </el-col>
        <el-col :span="3">
          <div class="col-sort">
            <span class="cate-item yticon icon-fenlei1"  v-if="current == 0" @click="toShowMode('false')">
              <img src="../../../static/images/ico/apps.png" alt="">
            </span>
            <span class="cate-item cgicon icon-vertical" v-else-if="current == 1" @click="toShowMode('true')">
               <img src="../../../static/images/ico/sort.png" alt="">
           </span>
          </div>
        </el-col>
      </el-row>
    </div>

    <div v-loading="loading" element-loading-text="无忧账号加载中..." style="min-height: 35vw;">
      <div class="img-item" v-if="!noResult">
        <div v-show="current === 0">
          <!--商品-->
          <div class="goods-box w">
            <div class="goods-title-box">
              <el-row :gutter="20">
                <el-col :span="16">
                  <div class="grid-content">商品标题</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content">价格</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content">查看详情</div>
                </el-col>
              </el-row>
            </div>
            <div class="goods-list-box">
              <el-row :gutter="20" class="g-row-item" v-for="(item,i) in goods" :key="i">
                <el-col :span="16">
                  <div class="grid-content c-goods-info">
                    <div class="goods-img">
                      <img :src="item.pic"/>
                    </div>
                    <div class="goods-info">
                      <p class="goods-name" :title="item.name" @click="linkToGoodsDetails(item.id)">{{item.name}}</p>
                      <table>
                        <tr>
                          <td class="goods-info-title">游戏类型：</td>
                          <td class="goods-info-value">{{item.productCategoryName}}</td>
                        </tr>
                        <tr>
                          <td class="goods-info-title">游戏大区：</td>
                          <td>{{item.gameGroup}}</td>
                        </tr>
                        <tr>
                          <td class="goods-info-title">游戏区服：</td>
                          <td>{{item.gameServer}}</td>
                        </tr>
                        <!--<tr>
                                                  <td class="goods-info-title">上架时间：</td>
                                                  <td>{{item.createTime}}</td>
                                              </tr>-->
                      </table>
                    </div>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content">
                    <em>¥</em><span class="goods-price">{{Number(item.price).toFixed(2)}}</span>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content">
                    <button class="btn-details" @click="linkToGoodsDetails(item.id)">查看详情</button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--				&lt;!&ndash;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;分页-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;-->
          <!--				<el-pagination v-if="!noResult&&!error"-->
          <!--					@size-change="handleSizeChange"-->
          <!--					@current-change="handleCurrentChange"-->
          <!--					:current-page="currentPage"-->
          <!--					:page-sizes="[8, 20, 40, 80]"-->
          <!--					:page-size="pageSize"-->
          <!--					 layout="total, sizes, prev, pager, next, jumper"-->
          <!--					 :total="total">-->
          <!--				</el-pagination>-->
        </div>
        <!--       // 4个一行展示商品-->
        <div class="m-type-content" v-show="current === 1">
          <el-row>
            <el-col :span="6" v-for="(iitem,k) in goods" :key="k">
              <mall-goods :msg="iitem"></mall-goods>
            </el-col>
          </el-row>
        </div>
        <!------------分页------------------->
        <el-pagination v-if="!noResult&&!error"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[8, 20, 40, 80]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
      <div class="no-info" v-if="noResult">
        <div class="no-data">
          <img src="/static/images/no-search.png">
          <br> 抱歉！暂时还没有商品
        </div>
      </div>
      <div class="no-info" v-if="error">
        <div class="no-data">
          <img src="/static/images/error.png">
          <br> 抱歉！出错了...
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapMutations, mapState } from 'vuex'
  import { getAllGoods } from '/api/goods.js'
  import { listGameById,listGameCategory } from '/api/index.js'
  import mallGoods from '/components/mallGoods'
  import YButton from '/components/YButton'
  import YShelf from '/components/shelf'
  import search from '/components/searchBox'
  //	import { currency } from '/api/utils'
  const CONST_XPSJ = "新品上架";
  const CONST_RQTJ = "人气推荐";
  const CONST_SSNR = "搜索内容";
  export default {
      metaInfo: {
        title: '无忧账号-游戏账号买卖出售-账号交易首选无忧-账号找回永久包赔-所售账号不转手永久包赔', // set a title
        meta: [{                 // set meta
          name: 'keywords',
          content: '5u，5u账号，5u258，5u游戏，游戏账号交易，无忧账号，游戏帐号交易平台,5u258交易平台，5u258官网，王者荣耀，CF枪战之王，火影忍者，QQ飞车手游，和平精英，穿越火线，英雄联盟，逆战，霸气玩，租号玩，买卖账号'
        },{                 // set meta
          name: 'description',
          content: '无忧账号,是国内专业安全的游戏帐号交易平台，账号找回永久包赔，所售账号不转手永久包赔。玩家可以通过极其优惠的价格购买王者荣耀，CF枪战之王，火影忍者，QQ飞车手游，和平精英，穿越火线，英雄联盟，逆战等游戏的极品号。'
        }]
      },
    data() {
      return {
        goods: [],
        noResult: false,
        error: false,
        loading: true,
        sortType: 1,
        windowHeight: null,
        windowWidth: null,
        sort: 'price asc',
        currentPage: 1,
        total: 0,
        pageSize: 20,
        gameList:[],
        groupList:[],
        curCheckedGameId:0,
        curCheckedGroupId:0,
        tempData:[],
        tempParamObj:{},	//查询条件临时存储
        priceSortFlag:'',
//				timeSortFlag:'▼',
        priceSort:0	,	//0:无排序 ，1：升序  2：降序
//				timeSort:2,		//0:无排序 ，1：升序  2：降序(后台默认是降序)
        sortAsc:'',
        sortDesc:'',
        priceRange:[{priceSectionStart:0, priceSectionEnd:500},
          {priceSectionStart:500, priceSectionEnd:1000},
          {priceSectionStart:1000, priceSectionEnd:3000},
          {priceSectionStart:3000, priceSectionEnd:5000},
          {priceSectionStart:5000, priceSectionEnd:10000},
          {priceSectionStart:10000, priceSectionEnd:'+'}],
        priceIndex:-1,
        curPriceRange:'',
        current:1
      }
    },
    methods: {
      ...mapMutations(['CHANGE_NAV']),
      handleSizeChange(val) {
        let paramObj = this.tempParamObj;
        this.pageSize = val;
        this._getAllGoods(paramObj);
        this.loading = true
      },
      handleCurrentChange(val) {
        let paramObj = this.tempParamObj;
        this.currentPage = val;
        this._getAllGoods(paramObj);
        this.loading = true
      },
      getListGame(paramObj) { 		//获取全部游戏类型
        listGameCategory().then(res => {
          if(res.code === 200) {
            this.error = false;
          } else {
            this.error = true;
          }
          var _tempList = [{id:0,name:'全部'}];
          var data = res.data;
          var isUnshift = true;
          for(var i = 0; i < data.length; i++) {
            try {
               var groupObj = data[i];
              // var _groupData = JSON.parse(groupObj.groupData);
              // for(var j = 0; j < _groupData.length; j++) {
                _tempList.push(groupObj);
              // }
            } catch(e) {
              console.error(e);
              this.error = true;
            }
          }
          //paramObj为空表示刷新页面操作，否则是输入条件查询
          var arr = Object.keys(paramObj);
          if(arr.length > 0){
            var key = paramObj.id;
            for (var i = 0; i < _tempList.length; i++) {
              if (_tempList[i].id === key) {
                _tempList.splice(i, 1);
                break;
              }
            }
            //searchValue等于undefined表示刷新页面或从其他页面点击链接进入当前页面
            if(paramObj.searchValue == undefined){
              //TODO 预留
            }else{
              //通过搜索进入当前页面，增加游戏类型 搜索内容
              if(paramObj.searchValue !== ""){
                paramObj.id = -1;
                paramObj.name = CONST_SSNR+"："+paramObj.searchValue;
              }else{
                if(paramObj.searchValue == "" && paramObj.name == ""){
                  isUnshift = false;
                }
              }
            }
            //根据查询条件选中游戏分类
            _tempList = this.addCurClass(paramObj,_tempList);
            //新品上架查询
            if(paramObj.navHotProductMore){
              paramObj.id = -2;
              paramObj.name = CONST_RQTJ;
            }
            //人气推荐查询
            if(paramObj.newproductMore){
              paramObj.id = -3;
              paramObj.name = CONST_XPSJ;
            }
            //将路由传人的游戏放在展示的第一位
            if(isUnshift){
              _tempList.unshift(paramObj);
            }
          }else{
            paramObj = {};
            paramObj.gameId = _tempList[1]["id"];
            //根据查询条件选中游戏分类
            _tempList = this.addCurClass(paramObj,_tempList);
          }
          this.gameList = _tempList;
          //根据当前选中的游戏获取大区信息
          this.getGroupById(paramObj);
        }).catch((e) => {
          console.log(e)
        });
      },
      getGroupById(param) {			//根据游戏id获取游戏区服
        var gameId = param.id ? param.id : param.gameId;
        var groupId = param.groupId;
        var gameServerId = param.gameServer;
        var gameName = param.searchValue;
        var priceSectionStart = param.priceSectionStart;
        var priceSectionEnd = param.priceSectionEnd;
        listGameById({gameId:gameId}).then(res => {
          if(res.success === false) {
            this.error = true
            return;
          }
          let data = [{id:0,name:"全部"}];
          for(var i = 0; i < res.data.length; i++){
            data.push(res.data[i]);
          };
          this.groupList = data;
          //默认查询，查询当前条件下的商品数据
          var pObj = {};
          if(gameId == 0){
            gameId = "";
            pObj.type = "all";
          }else if(gameId == -1){			//对搜索内容增加type字段，供后面临时存储搜索内容使用
            gameId = "";
            pObj.type = "search";
          }else if(gameId == -2){		//
            gameId = "";
            pObj.type = "navHotProduct";
          }else if(gameId == -3){
            gameId = "";
            pObj.type = "newproduct";
          }
          pObj.productCategoryId = gameId ? gameId : "";
          pObj.gameGroupId = groupId ? groupId:"";
          pObj.name = gameName ? gameName : "";
          pObj.gameServerId = gameServerId ? gameServerId : "";
          if(priceSectionEnd){
            pObj.priceSectionStart = priceSectionStart;
          }
          if(priceSectionEnd){
            pObj.priceSectionEnd = priceSectionEnd;
          }
          if(param.newproductMore){
            pObj.newProduct = param.newproductMore;
          }
          if(param.navHotProductMore){
            pObj.hotProduct = param.navHotProductMore;
          }
          if(data.length > 0){
            if(groupId){		//如果传游戏区服则直接查询区服下数据，否则默认取第一个区服的数据
              this.curCheckedGroupId = groupId;
              pObj.gameGroupId = groupId;
            }else{
              //如果当前游戏有区服就将区服临时存放
              this.curCheckedGroupId = 0;
              pObj.gameGroupId = "";
            }
          }
          this._getAllGoods(pObj);
        }).catch((e) => {
          console.log(e)
        });
      },
      _getAllGoods(pmsProduct) {
        var isSearch = pmsProduct.type == "search";
        var paramsObj = {
          pageNum : this.currentPage,
          pageSize : this.pageSize
        }
        delete pmsProduct.type;
        if(pmsProduct){
          paramsObj.pmsProduct = JSON.stringify(pmsProduct);
        }
        //每一次重新查询都临时保存查询条件
        this.tempParamObj = pmsProduct;
        getAllGoods(paramsObj).then(res => {
          if(res.code === 200) {
            var _data = JSON.parse(res.data);
            this.total = _data.total
            this.goods = _data.records
            this.noResult = false
            if(this.total === 0) {
              this.noResult = true;
            }
            if(isSearch){
              this.tempData = _data.records;
            }
            this.error = false;
          } else {
            this.error = true;
          }
          this.loading = false;;
        }).catch((e) => {
          console.log(e)
        });
      },
      // 价格排序
      sortByPrice() {
        let _priceSort = this.priceSort;
        let paramObj = this.tempParamObj;
        if(_priceSort == 0){
          this.priceSort = 1;
          this.priceSortFlag = "▲";
          this.sortAsc = this.sortAsc == '' ? "price" : this.sortAsc+",price";
          this.sortDesc = this.sortDesc.replace(",price","").replace("price","");
        }else if(_priceSort == 1){
          this.priceSort = 2;
          this.priceSortFlag = "▼";
          this.sortDesc = this.sortDesc == '' ? "price" : this.sortAsc+",price";
          //清空升序字段
          this.sortAsc = this.sortAsc.replace(",price","").replace("price","");
        }else if(_priceSort == 2){
          this.priceSort = 0;
          this.priceSortFlag = "";
          this.sortDesc = this.sortDesc.replace(",price","").replace("price","");
          this.sortAsc = this.sortAsc.replace(",price","").replace("price","");
        }
        this.currentPage = 1;
        this.loading = true;
        paramObj.sortDesc = this.sortDesc;
        paramObj.sortAsc = this.sortAsc;
        this._getAllGoods(paramObj);
      },
      // 列表结构显示
      toShowMode(mode) {
        if (this.current == 0) {
          this.current = 1;
        } else {
          this.current = 0;
        }
      },
//			sortByTime(){		//时间排序
//				let _timeSort = this.timeSort;
//				let paramObj = this.tempParamObj;
//				if(_timeSort == 0){
//					this.timeSort = 1;
//					this.timeSortFlag = "▲";
//					this.sortAsc = this.sortAsc == '' ? "createTime" : this.sortAsc+",createTime";
//					this.sortDesc = this.sortDesc.replace(",createTime","").replace("createTime","");
//				}else if(_timeSort == 1){
//					this.timeSort = 2;
//					this.timeSortFlag = "▼";
//					this.sortDesc = this.sortDesc =='' ? "createTime" : this.sortDesc+",createTime";
//					//清空升序字段
//					this.sortAsc = this.sortAsc.replace(",createTime","").replace("createTime","");
//				}else if(_timeSort == 2){
//					this.timeSort = 0;
//					this.timeSortFlag = "";
//					this.sortDesc = this.sortDesc.replace(",createTime","").replace("createTime","");
//					this.sortAsc = this.sortAsc.replace(",createTime","").replace("createTime","");
//				}
//				this.currentPage = 1;
//				this.loading = true;
//				paramObj.sortDesc = this.sortDesc;
//				paramObj.sortAsc = this.sortAsc;
//				this._getAllGoods(paramObj)
//			},
      checkedGame(obj){			//切换游戏
        if(obj.id == -1){		//点击"搜索"内容游戏类型
          this.curCheckedGameId = -1;
          this.goods = this.tempData;
        }else{
          //查询选中游戏对应的数据
          this.curCheckedGameId = obj.id;
          var param = {
            gameId:obj.id
          };
          if(this.curPriceRange){
            param.priceSectionStart = this.curPriceRange.priceSectionStart;
            param.priceSectionEnd = this.curPriceRange.priceSectionEnd;
          }
          this.getGroupById(param);
        }
      },
      checkedGroup(obj){
        this.curCheckedGroupId = obj.id;
        var param = {
          gameId:this.curCheckedGameId,
          groupId:obj.id
        };
        if(this.curPriceRange){
          param.priceSectionStart = this.curPriceRange.priceSectionStart;
          param.priceSectionEnd = this.curPriceRange.priceSectionEnd;
        }
        this.getGroupById(param);
      },
      checkedPrice(obj,priceIndex){
        this.priceIndex = priceIndex;
        let paramObj = this.tempParamObj;
        this.curPriceRange = obj;
        if(obj){
          var price =  obj.priceSectionEnd;
          //价格是数字
          if(typeof price === 'number' && !isNaN(price)){

          }else{
            price = price.indexOf("+") > -1 ? "" : price;
          }
          paramObj.priceSectionStart = obj.priceSectionStart;
          paramObj.priceSectionEnd = price;
        }else{
          paramObj.priceSectionStart = '';
          paramObj.priceSectionEnd = '';
        }
        this._getAllGoods(paramObj)
      },
      addCurClass(paramObj,tempList){			//添加选中样式
        var _tempList = tempList;
        if(paramObj.searchValue == ""){
          //输入内容为空，选中游戏不为空
          if(paramObj.name !== "" && paramObj.name !== undefined){
            this.curCheckedGameId = paramObj.id;
          }else{		//输入内容为空
            this.curCheckedGameId = _tempList[0]["id"];
          }
        }else{
          if(paramObj.searchValue){
            this.curCheckedGameId = _tempList[0]["id"];
          }else{
            this.curCheckedGameId = _tempList[1]["id"];
          }
          //输入内容不为空且选中游戏不为空
          if(paramObj.name !== "" && paramObj.name !== undefined){
            this.curCheckedGameId = paramObj.id;
          }
        }
        return _tempList;
      },
      linkToGoodsDetails(goodsId){
        window.open('//' + window.location.host + '/item?id=' + goodsId);
      }
    },
    created() {},
    computed: {
      ...mapState(['navIndex'])
    },
    mounted() {
      this.CHANGE_NAV(1);
      //获取路由参数
      var paramObj = this.$route.params.paramObj;
      this.windowHeight = window.innerHeight;
      this.windowWidth = window.innerWidth;
      var newproductMore = this.$route.params.newproductMore;
      var navHotProductMore = this.$route.params.navHotProductMore;
      if(paramObj == undefined || paramObj == ""){
        paramObj = {};
      }
      if(newproductMore){
        paramObj.newproductMore = true;
      }else if(navHotProductMore){
        paramObj.navHotProductMore = true;
      }
      this.getListGame(paramObj);
    },
    filters: {
//			currency: currency
    },
    components: {
      mallGoods,
      YButton,
      YShelf,
      search
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/style/mixin";
  @import "../../assets/style/theme";
  .goods {
    clear: both;
    width: 1100px;
    min-height: 600px;
    padding: 0 0 25px;
    margin: 20px auto;
  }

  .search-box {
    width: 100%;
    height: 90px;
    position: relative;
    margin-top: 30px;
  }

  .search-dom {
    position: relative;
    width: 80%;
    float: right;
    right: 0;
  }

  .nav-subs {
    position: relative;
    z-index: 20;
    height: 60px;
    background: #f7f7f7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
    .nav-sub-wrappers {
      padding: 20px 0;
      height: 50px;
      position: relative;
    }
    .w {
      display: flex;
      justify-content: space-between;
    }
    .nav-lists {
      height: 28px;
      line-height: 28px;
      display: flex;
      align-items: center;
      height: 100%;
      li:first-child {
        padding-left: 0;
        a {
          padding-left: 10px;
        }
      }
      li {
        position: relative;
        float: left;
        padding-left: 2px;
        a {
          display: block;
          // cursor: default;
          padding: 0 10px;
          color: #666;
          &.active {
            font-weight: bold;
            color: #FF8700;
          }
        }
        a:hover {
          color: #FF8700;
        }
      }
      li:before {
        content: ' ';
        position: absolute;
        left: 0;
        top: 13px;
        width: 2px;
        height: 2px;
        background: #bdbdbd;
      }
    }
  }

  .m-condition-box {
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    background-color: white;
  }

  .m-sort-box {
    margin-top: 30px;
    border: 1px solid #e0e0e0;
    background-color: white;
  }
  .w-row {
    position: relative;
    width: 100%;
    min-height: 60px;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #e0e0e0;
  }

  .w-col-title {
    width: 130px;
    text-align: right;
    padding: 20px 10px;
    border-right: 1px solid #e0e0e0;
  }

  .w-col-value {
    position: relative;
    width: calc(100% - 130px);
    padding: 10px 10px 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .w-col-value span {
    height: 80%;
    padding: 10px;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 5px;
  }

  .w-col-value span:hover {
    color: white;
    background-color: #FF8700;
  }

  .col-sort {
    padding-top: 20px;
    text-align: center;
    height: 100%;
    cursor: pointer;
  }
  .col-sort span{
    font-weight: bold;
    margin-left: 10px;
    color: #000000;
  }
  .current {
    color: white;
    background-color: #FF8700;
  }

  .goods-box {
    width: 100%;
  }

  .no-info {
    padding: 100px 0;
    text-align: center;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    .no-data {
      align-self: center;
    }
  }
  .btn-details{
    width: 120px;
    height: 45px;
    background-color: #FF8700;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 40px;
  }

  .goods-title-box {
    height: 60px;
    line-height: 60px;
    margin-top: 1px;
    background-color: white;
    border: 1px solid #e0e0e0;
  }
  .goods-list-box{
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: white;
  }
  .g-row-item{
    padding: 25px 20px;
    height: 200px;
  }

  .grid-content {
    text-align: center;
  }
  .c-goods-info{
    display: flex;
  }
  .goods-img{
    width: 140px;
    height: 140px;
    display: inline-block;
  }
  .goods-img img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .goods-info{
    width: calc(100% - 120px);
    height: 100%;
  }
  .goods-name{
    width: 100%;
    height: 45px;
    text-align: left;
    padding: 5px 20px;
    font-weight: bold;
    color: red;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -5px;
  }
  .goods-info-title{
    width: 100px;
    padding: 3px 15px;
    color: #999999;
  }
  .goods-price{
    color: red;
    font-size: 16px;
    font-weight: bold;
    margin-left: 5px;
    margin-top: 50px;
  }

  .img-item {
    display: flex;
    flex-direction: column;
  }

  .el-pagination {
    align-self: flex-end;
    margin: 3vw 10vw 2vw;
  }
  .g-row-item:hover{
    background-color: #fdf6ee;
  }


  @media (max-width: 1340px) {
    body {
      min-width: 1340px;
    }
    .goods {
      width: 1000px;
    }
    .search-box {
      right: 0;
      width: 100%;
    }
  }

  @media (min-width: 1700px) {
    body {
      min-width: 1470px;
    }
    .goods {
      width: 1200px;
    }
  }
</style>
